<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主机管理</title>
{{template "header.tpl" .}}
<style type="text/css">
.mytable {
    border-spacing: 0;
    border-collapse: collapse;
}
.mytable th,.mytable td{border-top: 0;border-bottom: 1px solid #ededed;padding: 10px;}
</style>
</head>
<body>
<div class="container">
  <div class="pagenav">
    资源管理 > 主机
  </div>
    <div id="toolbar" class="clear" style="margin-bottom: 10px;padding: 5px;">
      <form style="display:inline-block" id="searchForm">
      <select id="condi-os"><option value="">-选择操作系统-</option>
      {{range $val := .osnames}} <option>{{$val}}</option>{{end}}
      </select>
      <select id="condi-type"><option value="">-选择类型-</option>
      </select>

      <select id="condi-proj"><option value="">-选择项目-</option>
        {{range $key, $val := .projs}} <option value="{{$key}}">{{$val}}</option>{{end}}
      </select>
      <input type="text" id="condi-keyword" class="textbox" placeholder="请输入IP或名称" maxlength="50">
      <button class="btn btn-green" onclick="searchHost()" type="button">查询</button>
      <button class="btn btn-gray" onclick="resetForm('searchForm')" type="button">清空</button>
    </form>
      <div class="fr">
          <button class="btn btn-green" onclick="openHostDlg(0)">新增</button>
          <button class="btn btn-kermesinus" onclick="delHost()">作废</button>
      </div>
    </div>
    <div class="bigtable">
      <table id="hostGrid" style="width: 100%;min-height: 600px;" >
      </table>
    </div>
</div>
<!-- 主机信息编辑窗口 -->
<div title="编辑主机信息" class="easyui-dialog" id="hostDlg" style="width: 600px; height: 610px;" 
data-options="resizable:true,modal:true,top:50,closed:true,cache:false,buttons: [{
    text:'保存',iconCls:'icon-ok',handler:function(){
      document.getElementById('hostframe').contentWindow.saveHost(
        function(){
          $('#hostGrid').datagrid('reload');
          $('#hostDlg').dialog('close');
        });
    }},
    {text:'取消', handler:function(){
       $('#hostDlg').dialog('close');
   }}]">
   <iframe id="hostframe" style="width:100%;height:99%;border:0;"></iframe>
</div>

<script type="text/javascript">
$(document).ready(function() {
  $('#hostGrid').datagrid({
        idField:'hostId',
        singleSelect:true,
        fitColumns:true,
        autoRowHeight:false,
        nowrap:false,
        url:'/host/hostpage',
        border:false,
        loadFilter:dataGridFilter,
        scrollbarSize: 0,
        pagination:true,
        pageSize:15,
        pageList:[15,30,50],
        rowStyler: function(index,row){
            if (row.isDeleted){
                return 'color:#ccc;';
            }
        },
        columns:[[
            {field:'hostId',title:'ID',hidden:true},
            {field:'hostName',title:'名称',width:'16%'},
            {field:'publicIp',title:'IP',width:'11%',formatter:ipFmt},
            {field:'sshPort',title:'SSH端口',width:'7%'},
            {field:'osName',title:'操作系统',width:'8%'},
            {field:'projNames',title:'所属项目',width:'9%'},
            {field:'appNames',title:'部署应用',width:'15%'},
            {field:'hostType',title:'类型',width:'10%',formatter:typeFmt},
            {field:'createTime',title:'创建时间',width:'12%',fixed:true},
            {field:'isDeleted',title:'已废除',width:'6%',formatter:boolFmt},
            {field:'opt',title:'操作',width:'6%',fixed:true,align:'center',formatter:actionFmt}
        ]]
    });

    $('#hostGrid').datagrid('getPanel').addClass("lines-bottom");
   
    var $condiType=$('#condi-type')
    $.each(hostTypes, function( index, value ) {
      $condiType.append(new Option(value.text, value.value));
    });
    
});

//打开编辑框
function openHostDlg(opt){
  document.getElementById("hostframe").src="/host/hostdetail?id="+opt;
  $('#hostDlg').dialog('setTitle',opt==0?'新增主机':'编辑主机');
  $('#hostDlg').dialog('open');
}

function actionFmt(value,row,index){
      return '<a href="#" onclick="openHostDlg('+row.hostId+')" class="btn btn-green btn-xs">编辑</a>';
}

function typeFmt(value,row,index){
  var str="";
  $.each(hostTypes,function(index,ele){
    if(ele.value==value){
      str=ele.text
      return false;
    }
  });
   return str;
}

function ipFmt(value,row,index){
     var str=value;
     if(row.internalIp!=""){
       if(value==""){
         str=row.internalIp
       }else{
        str=str+"<br>"+row.internalIp;
       }
     }
     return str;
}

function delHost(){
    var selectedRow=$('#hostGrid').datagrid('getSelected');
    if(selectedRow!=null){
        $.messager.confirm('确认对话框', '确认要废除该主机吗', function(r){
            if (r){
                $.post("/host/delhost",{'id':selectedRow.hostId},function(result){
                    handleJsonResult(result,function(data){
                        var index=$('#hostGrid').datagrid('getRowIndex',selectedRow);
                        $('#hostGrid').datagrid('deleteRow',index);
                        toast("删除成功")
                    });
                },"json");
            }
        });
    }
}
function searchHost(){
  var osName=$('#condi-os').val();
  var keyword=$('#condi-keyword').val();
  var htype=$('#condi-type').val();
  var param={};
  if(osName!=""){
      param.os=osName;
  }
  if (htype!=""){
    param.htype=htype;
  }
  if(keyword!=""){
    if(safeChar(keyword)){
      param.keyword=keyword;
    }else{
      showWarn("不允许特殊字符~#^$><%!*=`");
      return;
    }
  }
  var projId=$('#condi-proj').val();
  if(projId!=""){
    param.projId=projId;
  }
  $('#hostGrid').datagrid('load',param);
}
</script>
</body>
</html>